<template>
  <div>
    <mt-popup v-model="popupVisible"
              position="right"
              :modal="false"
              class="popup-view"
              style="z-index:3">
      <div class="scroll-view">
        <customHeader :middleTitle="showInfo[switchType].title"
                      @leftCallBack="popupHide"
                      :jsBridgeBack="false" />
        <div class="notice"
             v-if="list&&list.length">
          <i class="zhk-order_fa"></i>{{showInfo[switchType].tip}}
        </div>
        <div class="page-body">
          <no-data msg="暂无数据"
                   v-if="list&&!list.length"></no-data>
          <!-- <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="30"> -->
          <div class="mint-checklist"
               v-if="list&&list.length&&(switchType=='POS_COLLECTION_VOICE'||switchType=='MKL_COLLECTION_VOICE'||switchType=='SMART_BOX_COLLECTION_VOICE'||switchType=='BOX_COLLECTION_VOICE')">
            <div class="mint-checklist-title">{{shopName}}</div>
            <div class="mint-checklist-label checklist"
                 v-for="(item,index) in list"
                 :key="index"
                 @click="handleChange(item.machineToolSn)">
              <span class="mint-checkbox">
                <input type="checkbox"
                       class="mint-checkbox-input"
                       :checked="!!checked[item.machineToolSn]">
                <span class="mint-checkbox-core"></span>
              </span>
              <div class="checklist-wrapper">
                <p class="mint-checkbox-label">
                  {{item.deviceName||'--'}}
                </p>
                <p class="mint-checkbox-label gray">设备SN：{{item.machineToolSn||'--'}}</p>
              </div>
            </div>
          </div>
          <div class="mint-checklist"
               v-if="list&&list.length&&switchType=='APP_COLLECTION_VOICE'">
            <div class="mint-checklist-title">{{shopName}}</div>
            <div class="mint-checklist-label checklist"
                 v-for="(item,index) in list"
                 :key="index"
                 @click="handleChange(item.accountId)">
              <span class="mint-checkbox">
                <input type="checkbox"
                       class="mint-checkbox-input"
                       :checked="!!checked[item.accountId]">
                <span class="mint-checkbox-core"></span>
              </span>
              <div class="checklist-wrapper">
                <p class="mint-checkbox-label">
                  <span class="red">[{{item.roleName}}]&nbsp;</span>{{item.name||'--'}}
                </p>
                <p class="mint-checkbox-label gray">{{item.mobile||'--'}}</p>
              </div>
            </div>
          </div>
          <div class="mint-checklist"
               v-if="list&&list.length&&(switchType=='QRCODE_VOICE'||switchType=='PAY_PRINT')">
            <div class="mint-checklist-title">{{shopName}}</div>
            <div class="mint-checklist-label checklist"
                 v-for="(item,index) in list"
                 :key="index"
                 @click="handleChange(item.qrcodeId)">
              <span class="mint-checkbox">
                <input type="checkbox"
                       class="mint-checkbox-input"
                       :checked="!!checked[item.qrcodeId]">
                <span class="mint-checkbox-core"></span>
              </span>
              <div class="checklist-wrapper">
                <p class="mint-checkbox-label" v-if="item.qrcodeType!==2">
                  <span class="red">[{{codeType[item.qrcodeType]||'未知'}}]&nbsp;</span>{{item.qrcodeName||'收款码1(默认)'}}
                </p>
                <p class="mint-checkbox-label" v-else>
                  <span class="blue">[{{codeType[item.qrcodeType]||'未知'}}]&nbsp;</span>{{item.qrcodeName||'收款码1(默认)'}}
                </p>
                <p class="mint-checkbox-label gray">码ID：{{item.qrcodeId||'--'}}</p>
                <p class="mint-checkbox-label gray">收银员：{{item.cashierName||'未绑定'}}</p>
              </div>
            </div>
          </div>
          <!-- </div> -->
          <p v-show="loading"
             class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}"
                        type="fading-circle"></mt-spinner>
          </p>
        </div>
        <div class="btn-wrap margin-safe-area-bottom"
             v-if="list&&list.length">
          <div @click="sure" v-if="switchType!='PAY_PRINT'">确定<span v-if="Object.keys(checked).length">({{Object.keys(checked).length}})</span></div>
          <div @click="sureByPayPrint" v-if="switchType=='PAY_PRINT'">确定<span v-if="Object.keys(checked).length">({{Object.keys(checked).length}})</span></div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, Toast } from "mint-ui";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";

export default {
  components: {
    customHeader,
    noData
  },
  props: {
    sn: {
      type: String
    },
    type: {
      type: String
    },
    shopId: {
      type: String
    },
    shopName: {
      type: String
    }
  },
  data() {
    return {
      popupVisible: false,
      checked: {},
      loading: false,
      noMore: false,
      pageIndex: 1,
      pageSize: 10,
      propsChecked: [],
      deviceType: "",
      deviceName: "",
      supplierId: "",
      list: null,
      codeType: {
        0: "基础码",
        1: "基础码",
        2: "小程序码",
        3: "基础码"
      },
      switchType: "QRCODE_VOICE",
      showInfo: {
        PAY_PRINT: {
          title: "选择收款码",
          tip: "未绑定任何二维码时，默认不打印二维码的订单",
          dataUrl: "/app/remote/print/findShopCodePlate.do"
        },
        QRCODE_VOICE: {
          title: "选择收款码",
          tip: "未选择任何二维码时，默认播报全部二维码的订单",
          dataUrl: "/newapp/code/queryQrCodesByShopIdList.do"
        },
        APP_COLLECTION_VOICE: {
          title: "选择员工",
          tip: "未选择任何员工时，默认播报全部员工的订单",
          dataUrl: "/newapp/employee/queryCashierList.do"
        },
        PC_COLLECTION_VOICE: {
          title: "选择设备",
          tip: "未选择任何设备时，默认播报全部设备的订单",
          dataUrl: "/newapp/machineTool/deviceQuery.do"
        },
        POS_COLLECTION_VOICE: {
          title: "选择设备",
          tip: "未选择任何设备时，默认播报全部设备的订单",
          dataUrl: "/newapp/machineTool/deviceQuery.do"
        },
        SMART_BOX_COLLECTION_VOICE: {
          title: "选择设备",
          tip: "未选择任何设备时，默认播报全部设备的订单",
          dataUrl: "/newapp/machineTool/deviceQuery.do"
        },
        MKL_COLLECTION_VOICE: {
          title: "选择设备",
          tip: "未选择任何设备时，默认播报全部设备的订单",
          dataUrl: "/newapp/machineTool/deviceQuery.do"
        },
        BOX_COLLECTION_VOICE: {
          title: "选择设备",
          tip: "未选择任何设备时，默认播报全部设备的订单",
          dataUrl: "/newapp/machineTool/deviceQuery.do"
        }
      }
    };
  },
  watch: {
    popupVisible(val) {
      if (val) {
        let _checked = {};
        this.propsChecked.forEach(item => {
          let codeItem;

          switch (this.switchType) {
            case "PAY_PRINT":
              codeItem = typeof item == "string" ? item : item.qrcodeId;
              break;
            case "QRCODE_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            case "APP_COLLECTION_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            case "POS_COLLECTION_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            case "SMART_BOX_COLLECTION_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            case "BOX_COLLECTION_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            case "MKL_COLLECTION_VOICE":
              codeItem = typeof item == "object" ? item.qrCode : item;
              break;
            default:
              break;
          }
          _checked[codeItem] = true;
        });
        this.checked = _checked;
      }
    }
  },
  methods: {
    popupShow(item) {
      this.propsChecked = item.limitationList ? item.limitationList : [];
      this.switchType = item.switchType;
      this.deviceType = this.checkDeviceType(item.switchType);
      this.deviceName = item.deviceName;
      this.supplierId = item.supplierId;
      this.popupVisible = true;
      this.$nextTick(() => {
        this.loadMore();
      });
    },
    checkDeviceType(type) {
      let temp = "";
      switch (type) {
        case "POS_COLLECTION_VOICE":
          temp = "POS";
          break;
        case "SMART_BOX_COLLECTION_VOICE":
          temp = "SMART_BOX";
          break;
        case "BOX_COLLECTION_VOICE":
          temp = "FAST_BOX";
          break;
        case "MKL_COLLECTION_VOICE":
          temp = "MKL";
          break;
        case "PAY_PRINT":
          temp = 54;
        default:
          break;
      }
      return temp;
    },
    popupHide() {
      this.popupVisible = false;
      this.$emit("handleCancel");
    },
    //确定
    sure() {
      const codeList = Object.keys(this.checked);
      this.ajax({
        url: "/newapp/setting/voiceDevice/limitationSet.do",
        type: "post",
        data: {
          sn: this.sn,
          type: this.type,
          switchType: this.switchType,
          shopId: this.shopId,
          shopName: this.shopName,
          codeList: codeList
        },
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            this.popupVisible = false;
            this.$emit("setChecked", codeList);
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    sureByPayPrint() {
      const codeList = Object.keys(this.checked);
      this.ajax({
        url: "/app/remote/print/bindDeviceCodePlate.do",
        type: "post",
        data: {
          sn: this.sn,
          supplierId: this.supplierId,
          shopId: this.shopId,
          deviceType: this.deviceType,
          deviceName: this.deviceName,
          qrcodeIdList: codeList,
        },
        controlLoading: true
      })
      .then(res => {
        if (res.success) {
          this.popupVisible = false;
          this.$emit("setChecked", codeList);
        } else {
          Toast(res.msg);
        }
      })
      .catch(err => {

      });
    },
    handleChange(id) {
      let hasCheck = this.checked[id];
      if (hasCheck) {
        this.$delete(this.checked, id);
      } else {
        this.$set(this.checked, id, true);
      }
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      if (this.switchType == "PAY_PRINT") {
        this.loadReceiptQRCode();
      }
      else {
        this.loadData();
      }
    },
    //加载二维码列表
    loadData() {
      this.loading = true;
      this.ajax({
        url: this.showInfo[this.switchType].dataUrl,
        type: "post",
        data: {
          shopIdList: [this.shopId],
          deviceType: this.deviceType ? this.deviceType : this.switchType
        },
        controlLoading: false
      })
        .then(res => {
          this.loading = false;
          if (res.success) {
            const data = res.resultObject;
            for (let i = 0; i < data.length; i++) {
              if (data[i].shopId == this.shopId) {
                switch (this.switchType) {
                  case "QRCODE_VOICE":
                    this.list = data[i].qrCodeList;
                    break;
                  case "APP_COLLECTION_VOICE":
                    this.list = data[i].employeeList;
                    break;
                  case "POS_COLLECTION_VOICE":
                  case "SMART_BOX_COLLECTION_VOICE":
                  case "BOX_COLLECTION_VOICE":
                  case "MKL_COLLECTION_VOICE":
                    this.list = data[i].deviceList;
                    for (let j = 0; j < this.list.length; j++) {
                      this.list[
                        j
                      ].deviceName = window.CommonUtil.getMachineNameByType(
                        this.list[j].machineToolType
                      );
                    }
                    break;
                  default:
                    break;
                }
              }
            }
            this.noMore = true;
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },
    // 查询收款码牌
    loadReceiptQRCode() {
      this.loading = true;
      this.ajax({
        url: this.showInfo[this.switchType].dataUrl,
        type: "post",
        data: {
          supplierId: this.supplierId,
          shopId: this.shopId
        },
        controlLoading: false
      })
      .then(res => {
        this.loading = false;
        if (res.success) {
          this.list = res.resultObject;
          this.noMore = true;
        }
      })
      .catch(err => {
        this.loading = false;
        this.noMore = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/_colors.scss";
@import "../../style/public";
.popup-view {
  width: 100%;
  height: 100%;
  background: $background;
  .page-body {
    @include remCalc(margin-bottom, 88);
  }
  .notice {
    color: #459DFF;
    background-color: rgba(230, 247, 255, 0.8);
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20, 30);
    > i {
      color: $color-blue;
      position: relative;
      @include remCalc(top, 3);
      @include remCalc(font-size, 28);
      @include remCalc(padding, 0, 10, 0, 0);
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    @include thin-border(true, true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      text-align: center;
      background: $color-blue;
      color: #fff;
      &::before {
        border-color: $color-blue;
      }
      &::after {
        border-color: $color-blue;
      }
    }
  }
  .mint-checklist-title {
    @include remCalc(font-size, 24);
    @include remCalc(padding, 0, 10);
  }
  .checklist {
    display: flex;
    position: relative;
    color: #333;
    background-color: #fff;
    justify-content: center;
    align-content: center;
    @include remCalc(font-size, 28);
    @include remCalc(padding, 15, 30);
    > * {
      pointer-events: none;
    }
    &:nth-of-type(n + 2) {
      @include thin-border(false, false, top);
    }
    .mint-checkbox {
      display: flex;
      justify-content: center;
      align-content: center;
      .mint-checkbox-core {
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    .checklist-wrapper {
      flex: 1;
      margin-left: 5px;
      .mint-checkbox-label:nth-of-type(1) {
        @include remCalc(margin-bottom, 5);
      }
    }
  }
  .gray {
    color: #999;
    @include remCalc(font-size, 24);
  }
  .red {
    color: #ff3300;
  }
  .blue{
    color: #459DFF;
  }
}
</style>
<style>
.mint-indicator-wrapper {
  z-index: 9999;
}
</style>
